<template>
  <div>
    <el-input
            :placeholder="holderText"
            v-model="searchKey"
            @input="getSearchSuggestion"
            @compositionstart.native="handleCompositionstart"
            @compositionend.native="handleCompositionend(searchKey)"
    >
      <!-- <el-select v-model="searchType" slot="prepend" placeholder="请选择" class="select-slot">
        <el-option v-for="(item,index) in allType[active]" :key="index" :label="item.label" :value="item.value"> </el-option>
      </el-select> -->

      <el-button slot="append" icon="el-icon-search" @click="search"> </el-button>
    </el-input>
  </div>
</template>

<script>
let placeholder = {
    TITLE: '标题关键字',
    UNIT: '单位关键字',
    ROLE: '角色关键字'
};
export default {
    name: 'search',
    props: ['active'],
    data() {
        return {
            searchType: 'TITLE',
            searchKey: '',
            canSearch: true,   //防抖控制参数
            timer: null,
            isCompositeInput: false,  //是否正在输入中文
            allType: {
                allArticle: [{
                    label: '标题',
                    value: 'TITLE'
                }],
                pubArticle: [{
                    label: '标题',
                    value: 'TITLE'
                }]
            }
        };
    },
    computed: {
        holderText(){
            return placeholder[this.searchType];
        }
    },
    methods: {
        search(){
            this.$emit('search', this.searchType, this.searchKey);
        },
        getSearchSuggestion(){
            clearTimeout(this.timer);    //防抖处理
            if(!this.isCompositeInput){
                this.canSearch = false;
                this.timer = setTimeout(() => {
                    //console.log(value);
                    this.search();
                    this.canSearch = true;
                    /*this.$axios.get('', value).then( res => {

            })*/
                }, 300);
            }
        },
        handleCompositionstart(){
            this.isCompositeInput = true;
        },
        handleCompositionend(value){
            this.isCompositeInput = false;
            //console.log(value);
            this.getSearchSuggestion(value);      //input事件发生在compositionend之前，因此需要手动调用一次
        }
    },
    watch: {
        active(){
            this.searchType = 'TITLE';
        }
    }
};
</script>

<style scoped>
  .el-select .el-input {
    width: 80px;
  }
</style>